<template>
  <div class="content">
    <div
      class="minContent"
      ref="echarts"
      @mousemove="mousemove"
      @mouseleave="mouseleave"
    ></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      chartInstance: null,
      data: [],
      totalPageSize: 0,
      currentPageSize: 1,
      timeId: null,
    };
  },
  mounted() {
    this.init();
    this.getData();
    window.addEventListener("resize", this.widthChange);
    this.widthChange();
  },
  destroyed() {
    clearInterval(this.timeId);
    //  防止内存泄漏
    window.removeEventListener("resize", this.widthChange);
  },
  methods: {
    init() {
      this.chartInstance = this.$echarts.init(this.$refs.echarts, "chalk");

      //1. 基本配置
      const initOption = {
        title: {
          text: "▍ 商家销售量统计",
          textStyle: {
            fontWeight: "normal",
          },
          left: 20,
          top: 20,
        },
        grid: {
          top: "20%",
          left: "6%",
          right: "6%",
          bottom: "6%",
          containLabel: true,
        },
        tooltip: {},
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
            z: 0,
            lineStyle: {
              color: "#2D3443",
            },
          },
        },
        series: [
          {
            name: "销量",
            type: "bar",
            label: {
              show: true,
              position: "right",
              textStyle: {
                color: "white",
              },
            },
            itemStyle: {
              //线性渐变
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#5052EE",
                },
                {
                  offset: 1,
                  color: "#AB6EE5",
                },
              ]),
            },
          },
        ],
      };
      this.chartInstance.setOption(initOption);
    },
    async getData() {
      const { data: res } = await this.$http.get("seller");
      this.data = res;
      this.totalPageSize = Math.ceil(this.data.length / 5);
      this.data = this.data.sort((a, b) => {
        return a.value - b.value;
      });
      this.updateEchart();
    },
    updateEchart() {
      let newDate = [];
      newDate = this.data.slice(
        (this.currentPageSize - 1) * 5,
        5 * this.currentPageSize
      );
      const XData = [];
      const YData = [];
      // console.log(newDate);
      for (let i of newDate) {
        XData.push(i.name);
        YData.push(i.value);
      }
      //2. 图表的数据的配置
      var dataOption = {
        yAxis: {
          data: XData,
        },

        series: [
          {
            data: YData,
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      this.chartInstance.setOption(dataOption);
      this.startInterTime();
    },
    startInterTime() {
      if (this.timeId) {
        clearInterval(this.timeId);
      }
      this.timeId = setInterval(() => {
        this.currentPageSize++;
        if (this.totalPageSize < this.currentPageSize) {
          this.currentPageSize = 1;
        }
        this.updateEchart();
      }, 3000);
    },
    mousemove() {
      clearInterval(this.timeId);
    },
    mouseleave() {
      this.startInterTime();
    },
    widthChange() {
      //3. 自适应配置
      const titleSize = (this.$refs.echarts.offsetWidth / 100) * 3.6;
      const sizeOption = {
        title: {
          textStyle: {
            fontSize: titleSize,
          },
        },
        tooltip: {
          axisPointer: {
            lineStyle: {
              width: titleSize,
            },
          },
        },
        series: [
          {
            barWidth: titleSize,
            itemStyle: {
              barBorderRadius: [0, titleSize / 2, titleSize / 2, 0],
            },
          },
        ],
      };
      this.chartInstance.setOption(sizeOption);
      this.chartInstance.resize();
    },
  },
};
</script>
<style scoped>
</style>